<link href="../../layui/css/layui.css" rel="stylesheet">
<form class="layui-form">
    <!--名称框-->
    <div class="layui-form-item">
        <div class="layui-block">
            <label class="layui-form-label">时间名称:</label>
            <div class="layui-input-block">
                <select name="time_name" lay-filter="time_name" id="time_name">
                    <option value="">---请选择---</option>
                </select>
            </div>
        </div>
    </div>
    <!--时间框-->
    <div class="layui-form">
        <div class="layui-block">
            <label class="layui-form-label">允许时间:</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="select_time">
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="margin-top: 10px">
        <div class="layui-input-block">
            <!--新增按钮-->
            <button type="submit" class="layui-btn layui-col-md-offset10" id="submit_select" lay-filter="submit_select">立即提交</button>
            <!--提交修改的按钮-->
            <button class="layui-btn" style="display: none" lay-filter="submit_update_time" id="submit_update_time">提交修改</button>
        </div>
    </div>

    <input style="display: none" id="time_name_input">
    <input style="display: none" id="time_id">
</form>

<script type="text/javascript" src="../../../static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../static/layui/layui.js"></script>
<script>

    // 进行下拉框内容的填充
    function fill_select(){
        let array=['选题时间','开题报告提交时间','毕业设计提交时间','毕业论文提交时间'];
        let year=new Date().getFullYear()-4;
        let operator_select=document.getElementById("time_name");
        array.forEach((item)=>{
            let create_option=document.createElement("option");
            create_option.value=year+"级"+item;
            create_option.innerHTML=year+"级"+item;
            operator_select.appendChild(create_option);
        });
    }
    fill_select();


    layui.use(['layer','laydate','form'], function(){
        var layer=layui.layer,
            laydate=layui.laydate,
            form=layui.form;


        // 时间选择框渲染
        laydate.render({
            elem: '#select_time'
            ,type: 'datetime'
            ,range: '~',
            trigger: 'click'
            ,done:function(value, date, endDate){
              // 选择完时间的回调方法
            }
        });

        // 监听下拉框选择
        form.on('select(time_name)', function(data){
            $('#time_name_input').val(data.value);
        });


        // 刷新form
        layui.clean_select=function (name){
            $("#time_name").empty();
            let create_option=document.createElement("option");
            create_option.value=name;
            create_option.innerHTML=name;
            document.getElementById("time_name").appendChild(create_option);
            form.render('select');
        };

        // 提交新增
        $("#submit_select").click(function () {
            let array=document.getElementById("select_time").value.split("~");
           let timeName=document.getElementById("time_name_input").value;
            $.ajax({
                type: "POST",
                url: "/api/v1/admin/time",
                dataType:"json",
                data: {"timeName":timeName,"startTime":array[0],"endTime":array[1]},
                success:function (data) {
                    if(data.code==0 && data.msg=='success'){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }else{
                        layer.msg("新增时间失败")
                    }
                }
            });
            // 阻止layui弹出层页面刷新
            return false;
        });

        // 提交修改
        $("#submit_update_time").click(function (){
            let array=document.getElementById("select_time").value.split("~");
            let id=document.getElementById("time_id").value;
            $.ajax({
                type: "PATCH",
                url: "/api/v1/admin/time",
                dataType:"json",
                data: {"id":id,"startTime":array[0],"endTime":array[1]},
                success:function (data) {
                    if(data.code==0 && data.msg=='success'){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        layer.msg("修改时间成功");
                    }else{
                        layer.msg("修改时间失败")
                    }
                }
            });
            return false;
        });

    });
</script>